<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #div {
            width: 600px;
            height: 600px;
            background-color: silver;
        }

        #div1 {
            width: 100px;
            background-color: #2aabd2;
            float: right;
            height: 38px;
        }
        #div2 {
            height: 50px;
            width: 200px;
            float: right;
            background-color: #880000;
            clear: right;
        }
        #div3 {
            width: 400px;
            height: 50px;
            background-color: #f0ad4e;
            float: right;
            clear: both;
        }
        #div4 {
            width: 190px;
            height: 180px;
            background-color: springgreen;
            /*float: right;*/
            clear: both;
        }
        .clearfix{
            clear: both;
            background-color: #5ba1cf;
        }

        .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }
        .clearfix {display: inline-block;}  /* for IE/Mac */


    </style>
</head>
<body>
<div id="div">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div id="div4">div44</div>
    <!--<br/>-->
    <!--<div style="clear: both;width: 300px;height: 100px;background-color: #2aabd2">11</div>-->
    <!--<div id="div4" class="clearfix">div4</div>-->
</div>
</body>
</html>